<template>
    <div class="biyao-search">
        <div class="search-input">
            <img class="search-input-img img" :src="searchIcon">
            <div class="search-input-text" @tap="openSearch">搜索商品</div>
            <img class="category-menu" :src="listIcon"  @tap="openCategory">
        </div>
    </div>
</template>
<script>
    import listIcon from './images/list.png';
    import searchIcon from './images/search.png';
    export default {
        data() {
            return {
                listIcon, searchIcon
            };
        },
        props: {
            onCategoryClick: {
                type: Function
            }
        },
        methods: {
            openSearch: function() {

            },
            openCategory() {
                if (this.onCategoryClick) {
                    this.onCategoryClick();
                }
            }
        }
    };
</script>
<style lang="less">
    .biyao-search {
        position: relative;
        border-bottom: 1px solid rgba(7,0,2,.1);
        .search-input {
            width: 8.4rem;
            height: .8rem;
            margin: .13rem;
            margin-left: .23rem;
            line-height: .8rem;
            transition: width .2s;
            background-color: #f2f2f2;
            color: gray;
            border-radius: .1rem;
            .category-menu {
                height: .6rem;
                width: .6rem;
                position: absolute;
                top: .1rem;
                right: .3rem;
            }
            .search-input-img {
                width: .4rem;
                height: .4rem;
                float: left;
                margin: .2rem 0 0 .2rem;
            }
            .search-input-text {
                font-size: .3733333333rem;
                padding: 0 0 0 .9rem;
                letter-spacing: 0;
            }
        }
    }
</style>
